@extends('choice')
@section('title', '高德地图')
@section('content')
    <style>
        #allmap {
            width: 100%;
            height: 440px;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
        .amap-icon img
        {
            width: 25px;
            height: 34px;
        }
    </style>
    <div class="text-c mb-20">
        <input type="text" id="txtAddress" class="input-text" style="width:250px" value="{{$address}}" placeholder="地址">
        <button type="button" id="btnSearch" class="btn btn-success"><i class="Hui-iconfont">&#xe665;</i>检索</button>
    </div>
    <div id="allmap"></div>
    <input type="hidden" id="hiPoint"/>
    <input type="hidden" id="hiAddress"/>
@stop
@push('script')
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key={{config('app.amap_ak')}}"></script>
    <script type="text/javascript">
        //初始化地图对象，加载地图
        var geocoder=false;
        AMap.plugin('AMap.Geocoder', function() {
            geocoder = new AMap.Geocoder({});
        });
        var map = new AMap.Map("allmap", {
            resizeEnable: true
        });
        map.on('click', function(e){
            map_click(e);
        });
        window.currentPoint = false;
        // 获取输入提示信息
        function autoInput(){
            var keywords = $('#txtAddress').val();
            AMap.plugin('AMap.Autocomplete', function(){
                // 实例化Autocomplete
                var autoOptions = {
                    city: '全国'
                };
                var autoComplete = new AMap.Autocomplete(autoOptions);
                autoComplete.search(keywords, function(status, result) {
                    if(result.tips){
                        map.clearMap();
                        $.each(result.tips,function(i,item){
                           if(item.id){
                               marker = new AMap.Marker({
                                   position: item.location,
                               });
                               marker.on('click',function(e) {
                                   map_click(e);
                               });
                               marker.setMap(map);
                           }
                        });
                    }
                })
            })
        }
        if ($('#txtAddress').val().length) {
            autoInput();
        }
        function map_click(e){
            geocoder.getAddress(e.lnglat, function(status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    console.log(result);
                    marker = new AMap.Marker({
                        position: e.lnglat,
                        icon:"//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png",
                        offset: new AMap.Pixel(-13, -30)
                    });
                    map.clearMap();
                    marker.setMap(map);
                    console.log(result.regeocode.addressComponent.adcode);
                    $("#hiAddress").val(result.regeocode.formattedAddress);
                    $("#hiPoint").val(e.lnglat.lng+','+e.lnglat.lat);
                }
            });
        };
        $('#btnSearch').click(function () {
            autoInput();
        });
    </script>
@endpush
